import jQuery from 'jquery'

import D3Utils from '../../utils/d3-chart'

export default {
    name: 'D3Charts',
    data() {
        return {
            // 柱状图
            barData: [{
                name: 'js',
                value: Math.floor(Math.random() * 100),
                value1: Math.floor(Math.random() * 100),
                value2: Math.floor(Math.random() * 100)
            }, {
                name: 'css',
                value: Math.floor(Math.random() * 100),
                value1: Math.floor(Math.random() * 100),
                value2: Math.floor(Math.random() * 100)
            }, {
                name: 'html',
                value: Math.floor(Math.random() * 100),
                value1: Math.floor(Math.random() * 100),
                value2: Math.floor(Math.random() * 100)
            }],
            // 折线图
            lineData: [1, 2, 3, 4, 5, 6, 7].map((val) => {
                return {
                    name: val,
                    value: Math.floor(Math.random() * 100)
                }
            }),
            // 多条折线图
            lineMultiData: ['一', '二', '三', '四', '五', '六', '七'].map((val) => {
                return {
                    name: '线' + val,
                    values: [1, 2, 3, 4, 5, 6, 7].map((num) => {
                        return {
                            name: num,
                            value: Math.floor(Math.random() * 100)
                        }
                    })
                }
            }),
            // 正太分布
            normalDisData: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((item) => {
                return {
                    x: item,
                    y:  Math.log((5.1 - Math.abs(item)) ** 2)
                }
            }),
            // 正太分布-均值
            mean: 0,
            // 正太分布-方差
            variance: 1
        }
    },
    computed: {},
    watch: {},
    mounted: function () {
        this.$nextTick(() => {
            // 绘制柱状图
            this.drawBar()
            // 绘制折线图
            this.drawLine()
            // 绘制多条折线图
            this.drawLineMulti()
            // 绘制堆叠区域图
            this.drawStackedArea()
            // 绘制正太分布图
            this.drawNormalDis()
            // 绘制散点图
            this.drawScatter()
            // 绘制箱线图（原始数据）
            this.drawBoxPlot()
            // 绘制箱线图（结果数据）
            this.drawResultBoxPlot()
            // 绘制小提琴图
            this.drawViolinPlot()
            // 绘制直方图（原始数据）
            this.drawHistogram()
            // 绘制直方图（结果数据）
            this.drawResultHistogram()
            // 绘制饼图
            this.drawPie()
            // 绘制饼图
            this.drawPie3D()
        })
    },
    methods: {
        drawBar() {
            D3Utils.bar('d3ChartBar', this.barData, {
                xField: 'name',
                yField: 'value',
                yFields: ['value', 'value1', 'value2']
            })
        },
        drawLine() {
            D3Utils.line('d3ChartLine', this.lineData, {
                xField: 'name',
                yField: 'value'
            })
        },
        drawLineMulti() {
            D3Utils.lineMulti('d3ChartLineMulti', this.lineMultiData, {
                xField: 'name',
                yField: 'value'
            })
        },
        drawStackedArea() {
            jQuery.getJSON('/public/mockData/stackedArea.json', (data) => {
                D3Utils.stackedArea('d3ChartStackedArea', data, {
                    xField: 'date'
                })
            })
        },
        drawNormalDis() {
            D3Utils.normalDis('d3ChartNormalDistribution', this.normalDisData, {
                max: 6,
                mean: this.mean,
                variance: this.variance
            })
        },
        drawScatter() {
            jQuery.getJSON('/public/mockData/scatter.json', (data) => {
                D3Utils.scatter('d3ChartScatter', data, {})
            })
        },
        drawBoxPlot() {
            jQuery.getJSON('/public/mockData/boxplot.json', (data) => {
                D3Utils.boxplot('d3ChartBoxPlot', data, {})
            })
        },
        drawResultBoxPlot() {
            jQuery.getJSON('/public/mockData/resultBoxplot.json', (data) => {
                D3Utils.resultBoxplot('d3ChartResultBoxPlot', data, {})
            })
        },
        drawViolinPlot() {
            jQuery.getJSON('/public/mockData/violinPlot.json', (data) => {
                D3Utils.violinPlot('d3ChartViolinPlot', data, {})
            })
        },
        drawHistogram() {
            jQuery.getJSON('/public/mockData/histogram.json', (data) => {
                D3Utils.histogram('d3ChartHistogram', data, {})
            })
        },
        drawResultHistogram() {
            jQuery.getJSON('/public/mockData/resultHistogram.json', (data) => {
                D3Utils.resultHistogram('d3ChartResultHistogram', data, {})
            })
        },
        drawPie() {
            jQuery.getJSON('/public/mockData/pie.json', (data) => {
                D3Utils.pie('d3ChartPie', data, {})
            })
        },
        drawPie3D() {
            jQuery.getJSON('/public/mockData/pie3d.json', (data) => {
                D3Utils.pie3d('d3ChartPie3D', data, {})
            })
        }
    }
}
